<template>
	<!-- 资金账户 -->
	<div>
		<headpage username="资金账户" routername="main1"></headpage>
		<div>
			<ul class="list2">
				<li>
					<svg class="icon" aria-hidden="true">
					  <use xlink:href="#icon-shoutuiche_"></use>
					</svg>
					现金（默认账户）
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
					  <use xlink:href="#icon-koushuijin"></use>
					</svg>
					微信
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
					  <use xlink:href="#icon-jimu"></use>
					</svg>
					支付宝
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
					  <use xlink:href="#icon-fushi"></use>
					</svg>
					银行存款
				</li>
				<li>
					<svg class="icon" aria-hidden="true">
					  <use xlink:href="#icon-chuangshangyongpin"></use>
					</svg>
					POS收银账户
				</li>
			</ul>
		</div>
		<div class="foot">
			<ul class="list">
				<li>添加</li>
				<li>转账</li>
				<li>编辑</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import headpage from "../headpage.vue"
	export default {
		name: "capital_account",
		components: {
			headpage
		}
	}
</script>

<style scoped="scoped">
	ul,
	li {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.list2 {
		line-height: 40px;
		justify-content: center;
	}

	.list2 li {
		border: 1px solid lightblue;
		margin: 20px;
		text-align: center;
		border-radius: 99em;
		font-size: 10px;
	}

	.icon {
		width: 1em;
		height: 1em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}
	
	.list{
		display:flex;
	}
	.list li{
		width:40%;
		text-align: center;
		line-height:40px;
		color:lightblue;
	}
	.list li:nth-child(1){
		text-align: left;
		padding-left:10px;
	}
	.list li:last-child{
		text-align: right;
		padding-right:10px;
	}
	.foot{
		width:100%;
		position:fixed;
		bottom:0;
	}
</style>
